<template>
	<view>
		<!-- #ifdef MP -->
		<search-slot>
			<template #left>
				<view class="search-left">
					<view class="iconfont icon-xiaoxi icon-size"></view>
				</view>
			</template>
			<template #center>
				<view class="search-center flex-1 m-1" @click="goSearch">
					请输入搜索内容
				</view>
			</template>
			<template #right>
				<view class="search-right" @click="getScan">
					<view class="iconfont icon-saoma icon-size"></view>
				</view>
			</template>
		</search-slot>
		<!-- #endif -->
		<view class="d-flex">
			<view class="span-5">
				<scroll-view scroll-y="true" :style="'height:'+scrollH" :scroll-into-view="scrollleftinto">
					<view v-for="(item,index) in cateList" :key="index" :id="'left'+index"
						class="left-height d-flex j-center a-center" :class="index==currentIndex?'action':''"
						@click="changeLeftTit(index)">{{item.name}}</view>
				</scroll-view>
			</view>
			<view class="span-15">
				<scroll-view scroll-y="true" :style="'height:'+scrollH" :scroll-into-view="scrollrightinto"
					scroll-with-animation @scroll="scrollRight">
					<view v-for="(item,j) in cateList" :key="j" class="d-flex flex-wrap right-item" :id="'right'+j">
						<view class="right-tab span24-8 text-center" v-for="(cate,c) in item.app_category_items"
							:key="c">
							<image :src="cate.cover" mode=""></image>
							<view class="">{{cate.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getCate
	} from '../../api/index.js'
	const instance = getCurrentInstance();
	const query = uni.createSelectorQuery().in(instance.proxy);
	var scrollH = ref('')
	var cateList = ref([])
	var currentIndex = ref(0)
	var scrollleftinto = ref('')
	var scrollrightinto = ref('')
	var rightTop = ref([])
	onLoad(() => {
		uni.getSystemInfo({
			success: (res) => {
				scrollH.value = res.windowHeight - uni.upx2px(178) + 'px'
				console.log('scrollH.value', scrollH.value);
			}
		})
	})
	onMounted(() => {
		getcate()
		setTimeout(() => {
			query.selectAll(".right-item").boundingClientRect((data) => {
				console.log("得到布局位置信息" + JSON.stringify(data));
				// 每个块的高度[185,278,648,648,100,200]
				data.map((item, i) => {
					console.log('11111111111', item.height);
					let top = i > 0 ? rightTop.value[i - 1] : 0
					top += item.height
					rightTop.value.push(top)
					console.log('rightTop', rightTop.value);
				})
			}).exec();
		}, 1000)
	})
	const getcate = () => {
		getCate().then(res => {
			console.log('rescate', res);
			cateList.value = res.data
		})
	}
	const changeLeftTit = (index) => {
		currentIndex.value = index
		scrollrightinto.value = 'right' + index
	}
	const scrollRight = (e) => {
		console.log(e);
		let index = rightTop.value.findIndex(v => {
			return v >= e.detail.scrollTop + 1
		})
		console.log('index', index);
		scrollleftinto.value = 'left' + index;
		currentIndex.value = index;
		
		scrollrightinto.value = ''
		console.log('scrollrightinto.value',scrollrightinto.value);
	}
</script>
<style scoped lang="scss">
	.search-right {
		width: 44rpx;
		height: 44rpx;
		flex: 0 0 44rpx;
		line-height: 44rpx;
		text-align: center;
	}

	.icon-size {
		font-size: 32rpx;
	}

	.search-center {
		background-color: #f4f4f4;
		height: 60rpx;
		line-height: 60rpx;
		text-indent: 20rpx;
		border-radius: 30rpx;
		color: #666;
		font-size: 28rpx;
	}

	.left-height {
		height: 120rpx;
	}

	.right-tab image {
		width: 100rpx;
		height: 120rpx;
	}

	.right-item:last-child {
		padding-bottom: 80vh;
	}
</style>